import type { DirectiveTransform } from '@vue/compiler-core';
import type { UserConfig } from 'vitepress';
import WindiCSS from 'vite-plugin-windicss';
import { sidebars } from './config/sidebars';
import { mdPlugin } from './config/plugins';
import { MarkdownTransform } from './config/markdown-transform';

const buildTransformers = (): Record<string, DirectiveTransform | undefined> | undefined => {
  const transformer: DirectiveTransform = () => {
    return {
      props: [],
      needRuntime: true,
    };
  };

  let transformers: Record<string, DirectiveTransform | undefined> = {};
  const directives: Array<string> = [
    // 'infinite-scroll',
    // 'loading',
    // 'popover',
    // 'click-outside',
    // 'repeat-click',
    // 'trap-focus',
    // 'mousewheel',
    // 'resize',
  ];
  directives.forEach((k: string) => {
    transformers[k] = transformer;
  });

  return transformers;
};

const config: UserConfig = {
  title: 'Element Plus Plus',
  lang: 'zh-CN',
  head: [['link', { rel: 'shortcut icon', href: '/favicon.ico', type: 'image/x-icon' }]],
  markdown: {
    config: (md) => mdPlugin(md),
  },
  themeConfig: {
    sidebars,
  },
  vue: {
    template: {
      ssr: true,
      compilerOptions: {
        directiveTransforms: buildTransformers(),
      },
    },
  },
  vite: {
    plugins: [WindiCSS({ config: '.vitepress/windi.config.ts' }), MarkdownTransform()],
  },
};

export default config;
